<template>
  <div style="height: 100%; background-color: transparent; overflow: hidden">
    <x-header
      :left-options="{ preventGoBack: true, backText: '' }"
      @on-click-back="backhome"
      >任务待办</x-header
    >
    <simple-search @onSearch="search" :placeholder="'输入任务名称或发起人'">
    </simple-search>
    <!-- <div class="task-order-way">
      <div class="task-order-way-item">任务类型</div>
      <div class="task-order-way-item">下达时间</div>
      <div class="task-order-way-item">任务名称</div>
      <div class="task-order-way-item">任务状态</div>
    </div> -->
    <div class="main-container" style="height: -webkit-fill-available">
      <v-touch
        v-on:swiperight="onSwipeRight"
        :swipe-options="{ direction: 'horizontal' }"
      >
        <scroller :on-refresh="refresh" :on-infinite="infinite">
          <!-- content -->
          <div>
            <div
              v-for="(item, i) in list"
              :key="i"
              class="card"
              @click="openInfo(item)"
            >
              <div class="gray-label">
                <span class="gray-label-before"></span
                >{{ item.PROCESSDEFINITION_NAME }}
              </div>
              <div class="card-title">{{ item.DESCRIPTION }}</div>
              <div
                class="apply-item"
                style="display: flex; align-items: flex-start"
              >
                <span
                  class="gray-label task-item-title apply-man"
                  style="white-space: nowrap"
                  >发起人:</span
                >
                <span class="apply-item-name" style="white-space: nowrap">{{
                  item.START_AUTHORFULLNAME
                }}</span>
                <!-- <span class="gray-label task-item-title current-link" style="white-space: nowrap">当前环节</span>
              <span class="apply-item-name" style="max-width: 84px">{{item.NAME}}</span> -->
              </div>
              <div class="apply-item">
                <span class="gray-label task-item-title per-link"
                  >发起时间:</span
                >
                <span class="apply-item-name">{{
                  item.CREATE_TIME.substring(0, 16)
                }}</span>
              </div>
              <div class="apply-item">
                <span
                  class="gray-label task-item-title current-link"
                  style="white-space: nowrap"
                  >当前环节:</span
                >
                <span
                  class="apply-item-name"
                  style="max-width: 84px; color: #4d8aff"
                  >{{ item.NAME }}</span
                >
              </div>
              <div v-if="!item.DATACONFIGS" class="warning">
                暂不支持移动端审批
              </div>
              <div v-if="isPcOnly(item) && item.DATACONFIGS" class="warning">
                当前环节不支持移动端审批
              </div>
            </div>
          </div>
        </scroller>
      </v-touch>
    </div>

    <router-view></router-view>
  </div>
</template>

<script>
import qs from "qs";
export default {
  name: "taskList",
  components: {},
  mounted() {},
  data() {
    return {
      list: [],
      page: 1,
      keyword: "",
      createPop: false, //弹出层是否创建
      loading: false, //下拉刷新时禁止无限加载
    };
  },
  methods: {
    backhome() {
      this.$router.push("/index/home");
    },
    //右滑返回上一层
    onSwipeRight() {
      this.$router.go(-1);
    },
    // getFilter (fields, value) {
    //   var filter = '';
    //   if (value != '') {
    //     filter = ' and (';
    //     for (var i = 0; i < fields.length; i++) {
    //       if (i != 0) {
    //         filter += ' or ';
    //       }
    //       filter += '(' + fields[i] + ' like \'%' + value + '%\' or \'' + value + '\'=\'\')';
    //     }
    //     filter += ')';
    //     console.log(filter);
    //   }
    //   return filter;
    // },
    getData(callback, failed) {
      // var filter = '';
      // if (this.keyword != '') {
      //   filter = this.getFilter(['description', 'start_authorfullname'], this.keyword);
      // }
      // var params = '{"_method":"component.getListData","_param":{"bizObj":"formflow","service":"getTaskList","fields":"*",' +
      //   '"filter":"( flag in (\'0\',\'1\',\'201\',\'401\'))' + filter +
      //   '","currentPageIndex":' + this.page + ',"pageSize":5,"orderList":[{"field":"CREATE_TIME","order":"desc"}],"QueryFormData":""}}';
      // var params = `
      //   '{
      //     "_method":"component.getListData",
      //     "_param":{
      //       "bizObj":"formflow",
      //       "service":"getTaskList",
      //       "fields":"*",
      //       "filter":"${this.keyword}"

      //       "currentPageIndex":${this.page},
      //       "pageSize":5,
      //       "orderList":[
      //         {
      //           "field":"CREATE_TIME",
      //           "order":"desc"
      //         }
      //       ],
      //       "QueryFormData":""
      //     }
      //   }'

      //  `;
      // var params =
      //   '{"_method":"component.getListData","_param":{"bizObj":"formflow","service":"getTaskList","fields":"*","filter":{"phone":{"flag":"(\'0\',\'1\',\'201\',\'401\')","description":"' +
      //   this.keyword +
      //   '","start_authorfullname":"' +
      //   this.keyword +
      //   '"}}' +
      //   ',"currentPageIndex":' +
      //   this.page +
      //   ',"pageSize":5,"orderList":[{"field":"CREATE_TIME","order":"desc"}],"QueryFormData":""}}';
      // {
      //   "phone":{
      //       "flag":"(\'0\',\'1\',\'201\',\'401\')",
      //       "description":"${this.keyword}",
      //       "start_authorfullname":"${this.keyword}",
      //   }
      // },

      var params = {
        _method: "component.getListData",
        _param: {
          bizObj: "formflow",
          service: "getTaskList",
          fields: "*",
          filter: {
            phone: {
              description:'"'+ this.keyword + '"',
              start_authorfullname: '"'+ this.keyword+'"',
            },
          },
          currentPageIndex: this.page,
          pageSize: 5,
          orderList: [
            {
              field: "CREATE_TIME",
              order: "desc",
            },
          ],
          QueryFormData: "",
        },
      };
      console.log(qs.stringify(params));
      this.$ajax({
        method: "post",
        url: this.COMMON_URL + "?_objName=formflow&_viewId=tasklist",
        data: {
          FixJSON: JSON.stringify(params),
        },
      })
        .then((res) => {
          console.log(res);
          callback(res);
        })
        .catch((err) => {
          failed();
        });
    },
    openInfo(item) {
      console.log(typeof this.isPcOnly(item));
      if (item.DATACONFIGS && !this.isPcOnly(item)) {
        this.$store.commit("SET_CURRENT_ROW", item);
        // this.$router.push('/task/info')
        this.$router.push("/info");
      } else if (this.isPcOnly(item)) {
        this.$vux.toast.text("当前环节不支持移动端审批", "middle");
      } else {
        this.$vux.toast.text("暂不支持移动端审批", "middle");
      }
    },
    infinite(done) {
      //上划加载方法
      console.log("infinite");
      console.log(this.page);
      if (this.loading) {
        done(); //TODO 啥意思
      } else {
        this.getData(
          (res) => {
            //res.data.datas中的字段都是大写的，res.data.data中的字段有小写的
            if (res.status == "200" && res.data.datas.length > 0) {
              this.list = [...this.list, ...res.data.datas]; //TODO 啥意思
              this.page++;
              done();
            } else {
              done(true); //有错误的情况或者没有记录，传参true
            }
          },
          () => {
            done(true);
          }
        );
      }
    },
    refresh(done) {
      this.page = 1;
      console.log("refresh");
      console.log(this.page);
      this.loading = true;
      this.getData(
        (res) => {
          if (res.status == "200" && res.data.datas.length > 0) {
            this.list = [...res.data.datas];
            this.page++;
            done();
          } else {
            done(true);
          }
          this.loading = false;
        },
        () => {
          done(true);
        }
      );
    },
    search(val) {
      this.page = 1;
      this.keyword = val;
      this.getData(
        (res) => {
          if (res.status == "200" && res.data.datas.length > 0) {
            this.list = [...res.data.datas];
            this.page++;
          } else {
            this.list = [];
          }
        },
        () => {
          this.list = [];
        }
      );
    },
    /**
     * 判断某条记录是否只能在pc端审批
     * @author jiangpei
     * @param {Object} item 任务代办列表中的单条数据
     * @returns {Boolean}
     */
    isPcOnly(item) {
      if (!item.DATACONFIGS) {
        return true;
      }
      var currentNodeId = item.NODEID;
      var item = JSON.parse(item.DATACONFIGS);
      var flowConfig = item.flowConfig;
      console.log(flowConfig[currentNodeId]);
      if (flowConfig[currentNodeId]) {
        return flowConfig[currentNodeId].isPcOnly === "true" ? true : false;
      } else {
        return false;
      }
    },
  },
  computed: {
    // userInfo () {
    //   return this.$store.state.user
    // },
    // mainPop () {
    //   return this.$store.state.mainPop
    // }
  },
  watch: {
    //监听路由的变化，如果路由发生变化则重新加载数据。
    $route() {
      this.page = 1;
      this.getData(
        (res) => {
          //res.data.datas中的字段都是大写的，res.data.data中的字段有小写的
          if (res.status == "200" && res.data.datas.length > 0) {
            this.list = res.data.datas;
            this.page++;
          } else {
          }
        },
        () => {}
      );
      //   if (this.$route.query.refresh) {
      //     this.$router.push('/task')
      // this.changeType(this.currentTab)
      // }
      //   this.$store.commit('updateLoadingStatus', false);
    },
  },
};
</script>

<style scoped>
.main-container {
  background: #ffffff;
}
.card {
  background: #fff;
  margin: 10px 16px;
  padding-bottom: 10px;
  /* padding: 10px 0; */
  /* border-radius: 4px; */
  overflow: hidden;
  border-bottom: 1px solid #f5f5f5;
}

.card-title {
  font-size: 1rem;
  line-height: 1rem;
  margin-top: 13px;
}
.warning {
  color: red;
  text-align: left;
  width: 165px;
  height: 20px;
  background: rgba(243, 33, 17, 0.1);
  padding-top: 4px;
  box-sizing: border-box;
  line-height: 11px;
  font-size: 11px;
  margin-top: 19px;
}

.gray-label {
  color: gray;
  font-size: 14px;
  line-height: 14px;
}

.gray-label-before {
  width: 4px;
  height: 13px;
  background: #4a8dff;
  margin-right: 14px;
  display: inline-block;
  border-radius: 2px;
  /* margin-left: -18px; */
}

.task-order-way {
  display: flex;
  margin-top: 15px;
  margin-bottom: 2px;
}

.task-order-way-item {
  margin-left: 20px;
  font-size: 0.75rem;
}

.task-order-way-item:first-child {
  margin-left: 15px !important;
}

.task-item-title {
  font-size: 13px !important;
  line-height: 13px;
  color: #9f9f9f !important;
}

.apply-item {
  line-height: 13px;
  margin-top: 14px;
}

.apply-man {
  margin-right: 26px;
}

.apply-item-name {
  font-size: 13px;
  line-height: 13px;
}

.current-link {
  /* margin-left: 32px; */
  margin-right: 13px;
}

.per-link {
  margin-right: 13px;
}
.moa-search-div /deep/ .moa-search-bar:after {
  border: none;
  background: #f5f5f5 !important;
}
.moa-search-div:after {
  border-bottom: none !important;
}

/* .moa-search-div {
  background: #ffffff;
} */
</style>

<style lang="css">
.moa-search-bar:after {
  content: "";
  background: #f3f3f3 !important;
  border: 0;
  border-radius: 2px;
}
.moa-search__input::-webkit-input-placeholder {
  color: #9f9f9f;
}
.moa-search__input::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #9f9f9f;
}
.moa-search__input:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #9f9f9f;
}
.moa-search__input:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #9f9f9f;
}
/* .transition-view /deep/ .vux-header {
  background-color: #ffffff !important;
} */
/* .transition-view /deep/ .vux-header .vux-header-left .left-arrow:before {
  border-color: #ccc;
} */
/* .transition-view .vux-header /deep/ .vux-header-title {
  color: #262a34;
} */
.moa-search-div /deep/ .moa-search-button {
  display: none;
}
</style>
